import React, { useEffect } from 'react';
import Header from '../../components/liu/header'
import { useNavigate, useLocation } from 'react-router-dom'
import '../../styles/liu/recordEdit.scss'
import { Button, Form, Input, Select, DatePicker, Col, message } from 'antd';
import dayjs from 'dayjs';
import {getSignRecordEdit} from '../../api/liu/index'
interface Props {

}
function RecordEdit(props: Props) {
    const { TextArea } = Input;
    const [form] = Form.useForm()
    const dateFormat = 'YYYY/MM/DD';
    var navigate = useNavigate()
    var location = useLocation()
    //挂载期获取回显数据
    useEffect(() => {
        form.setFieldsValue(location.state)
    }, [])
    //表单验证通过提交
    const onFinish = async (values: any) => {
        console.log('Success:', values);
        var {startDate2,...data} = values  
        var res =await getSignRecordEdit({...data,"born":location.state.born,"startDate":startDate2})
        if(res.status==200){
            navigate(-1)
        }
        
    };
    return (
        <div className='recordEdit'>
            <div className="main">
                <Header txt="编辑签约信息"></Header>

                <h4>居民信息</h4>
                <div className="inputbox">
                    <Form
                        name="basic"
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                        layout="inline"
                        onFinish={onFinish}
                        form={form}
                    >

                        <Col span={8}>
                            <Form.Item
                                label="姓名"
                                name="name"

                                rules={[{ required: true }]}
                            >
                                <Input disabled />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="身份证号"
                                name="id-num"
                                rules={[{ required: true }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>


                        <Col span={8}>
                            <Form.Item
                                label="性别"
                                name="sex"
                                rules={[{ required: true }]}
                            >
                                <Select>
                                    <Select.Option value="">请选择</Select.Option>
                                    <Select.Option value="男">男</Select.Option>
                                    <Select.Option value="女">女</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="出生年月"
                                name=""
                            >
                                <DatePicker disabled defaultValue={dayjs(location.state.born, dateFormat)} format={dateFormat} />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="联系电话"
                                name="phone"
                                rules={[{ required: true }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="现居地"
                                name="city"
                            >
                                <Input />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="居民标签"
                                name="tags"
                            >
                                <Select>
                                    <Select.Option value={["慢病护理", "高血压", "高血糖"]}>全选</Select.Option>
                                    <Select.Option value={["慢病护理"]}>慢病护理</Select.Option>
                                    <Select.Option value={["高血压"]}>高血压</Select.Option>
                                    <Select.Option value={["高血糖"]}>高血糖</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={16}></Col>


                        <Col span={24}><h4>签约信息</h4></Col>
                        <Col span={8}>
                            <Form.Item
                                label="签约编号"
                                name="id"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="签约状态"
                                name="isSign"
                            >
                                <Input bordered={false} style={{color:"#3DD4A7"}}/>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="签约机构"
                                name="organization"
                                rules={[{ required: true }]}
                            >
                                <Select>
                                    <Select.Option value="">请选择</Select.Option>
                                    <Select.Option value="罗西社区服务中心">罗西社区服务中心</Select.Option>
                                    <Select.Option value="天明社区服务中心">天明社区服务中心</Select.Option>
                                    <Select.Option value="民进社区服务中心">民进社区服务中心</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="签约团队"
                                name="doctorTeam"
                                rules={[{ required: true }]}
                            >
                                <Select>
                                    <Select.Option value="">请选择</Select.Option>
                                    <Select.Option value="李明明团队">李明明团队</Select.Option>
                                    <Select.Option value="王汉文团队">王汉文团队</Select.Option>
                                    <Select.Option value="李民进团队">李民进团队</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="签约医生"
                                name="doctor"
                                rules={[{ required: true }]}
                            >
                                <Select>
                                    <Select.Option value="">请选择</Select.Option>
                                    <Select.Option value="李明明">李明明</Select.Option>
                                    <Select.Option value="王汉文">王汉文</Select.Option>
                                    <Select.Option value="李民进">李民进</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="服务包"
                                name="server"
                                rules={[{ required: true }]}
                            >
                                <Select>
                                    <Select.Option value="">请选择</Select.Option>
                                    <Select.Option value="基础包">基础包</Select.Option>
                                    <Select.Option value="老年人基础包">老年人基础包</Select.Option>
                                    <Select.Option value="慢性病护理包">慢性病护理包</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="签约类型"
                                name="signType"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="签约周期"
                                name="signTime"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="费用"
                                name="signPrice"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="申请时间"
                                name="date"
                            >
                                <Input />
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                label="生效日期"
                                name="startDate2"
                                rules={[{ required: true }]}
                            >
                                <DatePicker defaultValue={dayjs(location.state.startDate !== "" ? location.state.startDate.slice(0, 11) : 'today', dateFormat)} />
                            </Form.Item>
                        </Col>
                        <Col span={24}></Col>
                        <Col span={8}>
                            <Form.Item
                                label="签约备注"
                                name="comment"
                            >
                                <TextArea rows={4} />
                            </Form.Item>
                        </Col>

                        <Col span={24}>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">保存</Button>
                                <Button onClick={() => { navigate(-1) }}>返回</Button>
                            </Form.Item>
                        </Col>
                    </Form>

                </div>
            </div>
        </div>
    );
}

export default RecordEdit;